<template>
  <section>
    <div class="searchBox">
      <div class="leftBox">
        <el-button type="primary" @click="handleAddFinger">编辑指纹</el-button>
        <el-button icon="el-icon-refresh" type="primary" plain @click="getPersonAccessFinger"
        >刷新
        </el-button>
        <div class="tips">请确认指纹外设已连接，否则无法生成特征值</div>
      </div>
    </div>
    <br />
    <div class="tableBox">
      <template>
        <el-table :data="tableData" border>
          <el-table-column prop="fingerUserId" label="用户指纹ID" align="center"></el-table-column>
          <el-table-column prop="identityData" label="指纹" align="center">
            <!-- 指纹图片  -->
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                ref="lazyImg"
                fit="cover"
                :preview-src-list="[scope.row.url + '?timetemp=' + new Date().getTime()]"
                :src="scope.row.url + '?timetemp=' + new Date().getTime()"
                :key="scope.row.url"
              >
                <div slot="placeholder" class="image-slot"><i class="el-icon-loading"></i>加载中</div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" label="特征状态" prop="fingerStatus">
            <template slot-scope="scope">{{ fingerStatusMap[scope.row.fingerStatus] }}</template>
          </el-table-column>
          <el-table-column align="center" class-name="status-col" label="操作" width="240">
            <template slot-scope="scope">
              <el-row>
                <!-- <el-button size="mini" class="light_blue_btn" @click="handleEditFinger">修改 </el-button> -->
                <el-button size="mini" class="light_red_btn" @click="handleDelete(scope.row)">删除 </el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="bottomBox">
      <pagination
        :limit.sync="form.pageSize"
        :page.sync="form.pageNum"
        :pageSizes="[10, 20, 40]"
        :total="total"
        @pagination="changePage"
      />
    </div>
    <addFinger
      ref="addFingerRef"
      :personId="personId"
      :personName="personName"
      :personGender="personGender"
      :fingerDataList="tableData"
      :fingerStatusMap="fingerStatusMap"
      @submitAddFinger="submitAddFinger" />
  </section>
</template>

<script>
import addFinger from '../components/addFinger'
import { getEventIdentity, uploadPersonFinger } from '@/api/community/person'
import { delFacePersonsApi } from '@/api/community/communityPerson'

export default {
  components: {
    addFinger
  },
  props: {
    personId: {
      type: String,
      default: ''
    },
    personName: {
      type: String,
      default: ''
    },
    personGender: {
      type: Number,
      default: 1
    }
  },
  data: function () {
    return {
      templateSelection: '',
      form: {
        personId: this.personId,
        type: 'finger',
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      fingerStatusMap: {
        '0': '无指纹',
        '1': '已生成',
        '2': '未生成',
        '-1': '生成失败',
        '99': '指纹已经存在'
      },
      total: 0
    }
  },
  created() {
    this.getPersonAccessFinger()
  },
  methods: {
    handleAddFinger() {
      this.$refs.addFingerRef.open()
    },
    changePage(val) {
      this.form.pageNum = val.page
      this.getPersonAccessFinger()
    },
    getPersonAccessFinger() {
      getEventIdentity(this.form).then(res => {
        if (res.count === 0) {
          this.tableData = []
        } else {
          // 获取指纹thumbnail
          // res.url = 'http://' + location.hostname + '/mdb/image_get?personid=' + this.personId + '&big_face=1&finger=1'

          res.datalist.forEach(item => {
            item.url = 'http://' + location.hostname + item.identityData
          })
          // res.datalist.forEach(item => {
          //   item.url = 'http://' + location.hostname + ':91/dev-api' + item.identityData
          // })
          this.tableData = res.datalist
          this.total = res.count
        }
      })
    },
    submitAddFinger(val) {
      uploadPersonFinger(val).then(res => {
        const { result } = res
        switch (result) {
          case 0:
            this.$refs.addFingerRef.cancel()
            this.getPersonAccessFinger()
            this.$message.success('编辑成功')
            break

          case -1:
            this.$message.error('指纹ID和其他人员重复')
            break

          default:
            this.$message.error('未知错误')
            break
        }
      })
    },
    handleDelete(row) {
      let params = {
        personId: this.personId,
        userId: row.fingerUserId,
        identityType: 7
      }
      this.$confirm('请问是否删除指纹?', '删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delFacePersonsApi(params).then(res => {
            this.getPersonAccessFinger()
          })
        })
        .catch((err) => {
          // ElMessage({
          //   type: "info",
          //   message: "取消删除",
          // })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table-column--selection .el-checkbox {
  visibility: hidden;
}

.el-table-column--selection label {
  width: 10px;
}

.searchBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .leftBox,
  .rightBox {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .tips {
    margin-left: 10px;
  }
}

.bottomBox {
  height: 60px;
  display: flex;
  justify-content: flex-end;
}

.btn-red {
  color: #f0142f;
  border-color: #fcd5d9;

  &:hover,
  &:focus,
  &:active {
    color: #f0142f;
    border-color: #fcd5d9;
  }
}
</style>
